import { Row, Col } from 'antd';
import indexOf from 'lodash/indexOf';
class ListItem extends React.Component {

  onNewRequest(wfid,f_weaver_belongto_userid,beagenter,isagent,e){
    const { unSupportSPAWf=[] } = this.props;
    let paramstr = `workflowid=${wfid}&isagent=${isagent}&beagenter=${beagenter}&f_weaver_belongto_userid=${f_weaver_belongto_userid}&f_weaver_belongto_usertype=0`;
		const supportSPA = indexOf(unSupportSPAWf,wfid) === -1;
		const url = supportSPA ? "/spa/workflow/static4form/index.html?_rdm="+new Date().getTime()+"#/main/workflow/req?iscreate=1&" : "/workflow/request/CreateRequestForward.jsp?";
		this.openFullWindowHaveBar(url+paramstr);
  }
  
  openFullWindowHaveBar(url){
		var redirectUrl = url;
		var width = screen.availWidth - 10;
		var height = screen.availHeight - 50;
		var szFeatures = "top=0,";
		szFeatures += "left=0,";
		szFeatures += "width=" + width + ",";
		szFeatures += "height=" + height + ",";
		szFeatures += "directories=no,";
		szFeatures += "status=yes,toolbar=no,location=no,";
		szFeatures += "menubar=no,";
		szFeatures += "scrollbars=yes,";
		szFeatures += "resizable=yes"; //channelmode
		window.open(redirectUrl, "", szFeatures);
	}
  render() {
    const { needListFloat=false, data, ifFromAddWf=false, index} = this.props;
    let colorArr = [];
    if(navigator.userAgent.indexOf("MSIE 9.0") >= -1) { //为了兼容IE9
      colorArr = [
        'linear-gradient(180deg, #68D9FF 0%, #37B1FF 100%)',
        'linear-gradient(180deg, #FF978F 0%, #FF5E56 100%)',
        'linear-gradient(180deg, #FFC669 0%, #FF9537 100%)',
        'linear-gradient(180deg, #C1E966 0%, #8DCE36 100%)',
        'linear-gradient(180deg, #DAB2FD 0%, #B37BFA 100%)',
        'linear-gradient(180deg, #68D9FF 0%, #37B1FF 100%)',
        'linear-gradient(180deg, #FF978F 0%, #FF5E56 100%)',
        'linear-gradient(180deg, #FFC669 0%, #FF9537 100%)',
        'linear-gradient(180deg, #C1E966 0%, #8DCE36 100%)',
        'linear-gradient(180deg, #DAB2FD 0%, #B37BFA 100%)'
      ];
    } else {
      colorArr = [
      '#68D9FF',
      '#FF978F',
      '#FFC669',
      '#C1E966',
      '#DAB2FD',
      '#68D9FF',
      '#FF978F',
      '#FFC669',
      '#C1E966',
      '#DAB2FD'
      ]
    }
    let colorPicker = colorArr[index];
    let dom = (
      <li className={needListFloat? 'li-float list-item': 'list-item'}  >
        <span className='dot' style={{background: colorPicker}}></span>
        {
          ifFromAddWf ?  	
            <div className='wf-link-box'>
              <div onClick={this.onNewRequest.bind(this,data.id,'',0,0)} 
                 target="_blank" 
                 style={{
                   overflow: 'hidden',
                  '-webkit-box-orient': 'vertical',
                  '-webkit-line-clamp': 2,
                  display: '-webkit-box'
                 }}
                 title={data.name}>
                  {data.name}
              </div>
            </div> 
          :  
            <div className='wf-link-box'  
            style={{
              'overflow': 'hidden',
             '-webkit-box-orient': 'vertical',
             '-webkit-line-clamp': 2,
             display: '-webkit-box'
           }} 
           title={data.reportname} 
           dangerouslySetInnerHTML={{__html: data.reportnameSpan}}></div>
        }
      </li>
    )
    return dom;
  }
}

class List extends React.Component{
    render() {
      const { listData=[], unSupportSPAWf=[], ifFromAddWf=false } = this.props;
      let listArr = [];
       listArr.push(listData)
      return(
        <div className='center-ele-list'>
          {listArr.length > 0 && listArr.map( (v,i) => {
            return ( 
              <div>
                {
                  v.length> 0 ?  v.map( (item,index) => {
                    return (
                      <ul>
                        <ListItem ecId={`${this && this.props && this.props.ecId || ''}_ListItem@zkipqg@${index}`} 
                          index={index}
                          unSupportSPAWf={unSupportSPAWf}
                          ifFromAddWf={ifFromAddWf}
                          data={item} 
                        />
                    </ul>
                    )
                  })
                  : (
                    <div className='img-wrap'>
                      <img src='/images/ecology9/workflow/center/nodata.png'/>  
                    </div>
                  )
                }
              </div>
            )
          })}
        </div>
      ) 
      
    }
}

export default List